<template>
  <div>
    <el-card class="margin_30">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="small" @click="goAddActivity(0)">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="productList"
        border
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column
          label="序号"
          align="center"
          width="50"
          type="index"
          fixed="left"
        />
        <!-- prop需要展示的数据部分 -->
        <!-- label表头的名称 -->
        <el-table-column
          prop="pic"
          label="商品图片"
          align="center"
          width="170"
        >
          <template v-slot="scope">
            <img style="width:100px;height:100px" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>

        <el-table-column
          prop=""
          label="活动时间"
          width="230"
          align="center"
        >
          <template slot-scope="scope">
            <div>开始时间：{{ scope.row.promotionStartTime }}</div>
            <div>结束时间：{{ scope.row.promotionEndTime }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="是否过期"
          width="100"
          align="center"
        >
          <!-- <template slot-scope="scope">
            <div>开始时间：{{ scope.row.createTime }}</div>
            <div>结束时间：{{ scope.row.endTime }}</div>
          </template> -->
        </el-table-column>

        <el-table-column
          prop="name"
          label="商品名称"
          align="center"
          width="250"
        />
        <el-table-column
          prop="brandName"
          label="品牌名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="price"
          label="商品价格"
          width="120"
          align="center"
        />

        <el-table-column
          prop="productCategoryName"
          label="商品类别"
          width="120"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          width="180"
        />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="goEdit(scope.row,1)">编辑</el-button> -->
            <el-button style="color:red;" size="mini" type="text" @click="del(scope.row.recommendId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹框出现 -->
    <el-dialog top="3vh" title="热销详情" :visible.sync="isShowDialog" width="80%" size="mini" @close="handleDialog">
      <goods :brandlist="brandList" :current="1" :productform="productForm" :list="list" :total="paginationParams.total" @uptlimit="parentuptlimit" @uptstart="parentuptstart" @searchgoods="searchgoods" @resetgoods="resetgoods" />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleDialog">取 消</el-button>
        <!-- <el-button type="primary" @click="addActivity">确 定</el-button> -->
      </div>
    </el-dialog>

  </div>
</template>

<script>
import goods from '@/components/goods/index.vue'
import { productsByPage, findAllRecommends, delRecommend, findAllBrand } from '@/api/market/activity'
import mix from '@/mixins'
export default {
  components: { goods },
  mixins: [mix],
  data() {
    return {
      // 是否显示加载中
      loading: false,
      isShowDialog: false,
      start: 1,
      limit: 5,
      list: [],
      productList: [],
      form: {},
      brandList: [],
      productForm: {
        'brandId': '',
        'id': '',
        'name': '',
        'productCategoryId': '',
        'productSn': '',
        'publishStatus': '',
        'verifyStatus': ''
      }
    }
  },

  created() {
    this.getActivityList()
  },

  mounted() {

  },

  methods: {
    // 重置
    resetgoods() {
      this.productForm = {}
      this.getActivityList()
    },
    // 子组件条件搜索
    searchgoods(e) {
      this.productForm = e
      this.getActivityList()
    },
    // 子组件当前页
    parentuptstart(e) {
      this.paginationParams.start = e
      this.getActivityList()
    },
    // 子组件每页数据
    parentuptlimit(e) {
      this.paginationParams.limit = e
      this.getActivityList()
    },
    getActivityList() {
      // 活动列表
      findAllRecommends()
        .then(res => {
          // console.log(res)
          this.productList = res.data.items
        })
        // 商品列表
      productsByPage(this.paginationParams.start, this.paginationParams.limit, this.productForm)
        .then(res => {
          // console.log(res)
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
        })
        // 品牌列表
      findAllBrand()
        .then(res => {
          console.log(res)
          this.brandList = res.data.items
        })
    },
    goEdit() {

    },
    del(id) {
      console.log(id)
      delRecommend(id)
        .then(res => {
          console.log(res)
          this.getActivityList()
        })
    },
    addActivity() {

    },
    // 取消新增
    handleDialog() {
      this.isShowDialog = false
      this.form = {}
    },
    // 新增
    goAddActivity() {
      this.isShowDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
